/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: swx  Date: 2019/06/20 Time: 10:06
 *
 * 设置密码
 */

import React, {Component} from 'react';
import {
    SafeAreaView, ScrollView, Text, TextInput, TouchableOpacity, View
} from 'react-native';
import {connect} from 'react-redux';
import {styles} from './ChangePasswordScreen.Style';
import AntDesign from "react-native-vector-icons/AntDesign";
import User from "../../../model/User/User";
import {COLOR_WHITE} from "../../../constant/PHColors";
import {toChangePassword} from "./Actions";
import {doDisplayWarnMessage} from "../../../component/Message/Action";
import {FetchStatus} from "../../../configuration/RequestConfiguration";
import {ReturnStatus} from "../../../configuration/ReturnStatus";

class ChangePasswordScreen extends Component {

    static navigationOptions = ({navigation}) => ({
        headerTitle: `设置密码`,
        headerRight: (
            <TouchableOpacity activeOpacity={0.9} onPress={navigation.getParam('navigateConfirm')}>
                <View style={{width: 80, height: 44, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
                    <Text style={{fontSize: 16, color: '#212121'}}>
                        完成
                    </Text>
                </View>
            </TouchableOpacity>
        ),
    });

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            user:{},                //用户信息
            oldPassword:"",         //原密码
            newPassword:"",         //新密码
            newPassword_check:"",   //确认密码
        };

        User.getUser(user => {
            this.setState({
                user:user,
            })
        });
    }

    // 组件渲染后调用
    componentDidMount() {
        this.props.navigation.setParams({navigateConfirm:this.changePassword});
    }

    componentWillReceiveProps(nextProps, nextContext): void {
        let {dispatch} = this.props;
        if (nextProps.onChangePassword !== this.props.onChangePassword && nextProps.onChangePassword.fetchStatus === FetchStatus.Success) {

            if (nextProps.onChangePassword.RETURN.toString() === ReturnStatus.Success) {
                this.props.navigation.navigate('AccountSettingsScreen')
            } else {
                dispatch(doDisplayWarnMessage(nextProps.onChangePassword.MSG))
            }
        }
    }

    render() {
        return (
            <SafeAreaView style={styles.body}>
                <ScrollView style={styles.body}>

                    <View style={styles.formFirst}>
                        <View style={styles.formUpper}>
                            <View style={styles.leftBox}>
                                <Text style={styles.leftBoxText}>
                                    用户名
                                </Text>
                            </View>
                            <View style={styles.rightBox}>
                                <Text style={styles.rightBoxText}>
                                    {this.state.user.userid||""}
                                </Text>
                            </View>
                        </View>
                    </View>

                    <View style={styles.formSecond}>

                        <View style={styles.formUpper}>
                            <View style={styles.leftBox}>
                                <Text style={styles.leftBoxText}>
                                    原密码
                                </Text>
                            </View>
                            <View style={styles.rightBox}>
                                <TextInput
                                    placeholder={'填写原密码'}
                                    secureTextEntry={true}
                                    clearButtonMode={'while-editing'}
                                    style={{
                                        fontSize: 16,
                                        padding: 0,
                                        color:(this.state.oldPassword===""||typeof (this.state.oldPassword)==='undefined')?'#f1f1f1':'#000000',
                                    }}
                                    numberOfLines={1}
                                    underlineColorAndroid={'transparent'}
                                    onChangeText={text=>{
                                        this.setState({oldPassword: text});
                                    }}
                                    defaultValue={this.state.oldPassword}
                                />
                            </View>
                        </View>
                        <View style={styles.formMiddle}>
                            <View style={styles.leftBox}>
                                <Text style={styles.leftBoxText}>
                                    新密码
                                </Text>
                            </View>
                            <View style={styles.rightBox}>
                                <TextInput
                                    placeholder={'填写新密码'}
                                    secureTextEntry={true}
                                    clearButtonMode={'while-editing'}
                                    style={{
                                        fontSize: 16,
                                        padding: 0,
                                        color:(this.state.newPassword===""||typeof (this.state.newPassword)==='undefined')?'#f1f1f1':'#000000',
                                    }}
                                    numberOfLines={1}
                                    underlineColorAndroid={'transparent'}
                                    onChangeText={text=>{
                                        this.setState({newPassword: text});
                                    }}
                                    defaultValue={this.state.newPassword}
                                />
                            </View>
                        </View>
                        <View style={styles.formLower}>
                            <View style={styles.leftBox}>
                                <Text style={styles.leftBoxText}>
                                    确认密码
                                </Text>
                            </View>
                            <View style={styles.rightBox}>
                                <TextInput
                                    placeholder={'再次填写确认'}
                                    secureTextEntry={true}
                                    clearButtonMode={'while-editing'}
                                    style={{
                                        fontSize: 16,
                                        padding: 0,
                                        color:(this.state.newPassword_check===""||typeof (this.state.newPassword_check)==='undefined')?'#f1f1f1':'#000000',
                                    }}
                                    numberOfLines={1}
                                    underlineColorAndroid={'transparent'}
                                    onChangeText={text=>{
                                        this.setState({newPassword_check: text});
                                    }}
                                    defaultValue={this.state.newPassword_check}
                                />
                            </View>
                        </View>
                    </View>



                </ScrollView>
            </SafeAreaView>
        )
    }

    changePassword=()=> {
        let {dispatch} = this.props;
        if(this.state.newPassword === this.state.newPassword_check){
            // let str = {"alinusers":{"uname":"TEST","upass":"051471999047558070080534132"}};
            let str = {"oldPassword":this.state.oldPassword,"newPassword":this.state.newPassword,"userid":this.state.user.userid};

            dispatch(toChangePassword(str));
        }else{
            dispatch(doDisplayWarnMessage("两次填写的密码不一致！"))
        }

    };
}

const props = state => {
    return {
        onChangePassword:state.onChangePassword
    }
};

export default ChangePasswordScreen = connect(props)(ChangePasswordScreen);